<template>
  <div>
    <MainNavBar class="main-nav" id="main-nav">
      <template #center-name> 竞赛规程 </template>
    </MainNavBar>
    <div class="container">
      <div class="header" id="header">
        <div class="cloud-top">
          <img src="http://qnticao.laigl.com/vue/cloud-top.png" alt="云朵" />
        </div>
        <div class="cloud-left">
          <img src="http://qnticao.laigl.com/vue/cloud-left.png" alt="云朵" />
        </div>
        <div class="cloud-right">
          <img src="http://qnticao.laigl.com/vue/cloud-right.png" alt="云朵" />
        </div>
        <div class="top">
          <!-- 全国首届体操通级比赛
          <br />暨全国亲子体操比赛 -->
          <img
            src="../../assets/images/141b2f935e84fef5248ad72197ff91e.png"
            alt=""
          />
        </div>
        <div class="date">2021年6月1日——12月31日</div>
        <div class="glass"></div>
      </div>
      <div class="info">
            <!-- <div
            class="item"
            @click="goActionDetail(item.id)"
            v-for="item in actionList"
            :key="item.id"
          > -->
            <div
            class="item"
            @click="goActionDetail(item)"
            v-for="item in actionList"
            :key="item.id"
            v-if="actionList.length > 0 && actionList[0]!=null"
          >
            <div class="left">
              <img :src="item.img" alt="视频" />
              <!-- <img src="http://qnticao.laigl.com/admin/20210513/39c83ca9ed46fd9d5f2253452eb3c279.png!watermark" alt="视频" /> -->
              <img
                src="http://qnticao.laigl.com/vue/Play.png"
                class="play"
                alt="播放"
              />
            </div>
            <div class="right">
              <div class="name">{{ item.name }}</div>
              <!-- <div class="name">{{'暂无视频' }}</div> -->
              <div class="duration"></div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { onMounted } from '@vue/runtime-core';
import {request} from "@/network/request"
import { Toast } from 'vant';
import {ref} from "vue"
import { useRoute, useRouter } from 'vue-router';
export default {
  components: {
    MainNavBar,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
     const goActionDetail = ({compet_id,level_id,id}) => {
      router.push({
        path: "/actionDetail",
        query: {
          match_id:compet_id,
          level_id,
         id,
        },
      });
    };
    // 获取动作要求 
    const actionList = ref([])
   async function getActionList (){
    const res = await  request({
        url:"v1/competition/getActionList",
        data:{
          compet_id:route.query.compet_id,
          level_id: route.query.level_id,
          page:1
        }
      })
      if(res.code === 200){
         actionList.value = res.data.rows
      }else{
        Toast(res.msg)
      }
    }
    onMounted(()=>{
      getActionList()
    })
    return {goActionDetail,actionList};
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: calc(100vh - 13.333vw);
  background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
  background-repeat: repeat;
  background-color: #0054a6;
  // background-size: cover;
  background-size: 100% auto;
  position: relative;
  overflow: hidden;
  .info{
    margin-top: -3.333vw;
    width: 100%;
    min-height: calc(100vh - 13.333vw - 54.8vw);
    background-color: #fff;
    border-top-left-radius: 5.333vw;
    border-top-right-radius: 5.333vw;
    -webkit-appearance: none;
    overflow: hidden;
    padding: 0 6.4vw;
    padding-top: 5.333vw;
     .item {
      height: 20vw;
      display: flex;
      margin-bottom: 4.533vw;
      .left {
        width: 26.667vw;
        height: 100%;
        margin-right: 3.733vw;
        flex-shrink: 0;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
          border-radius: 1.333vw;
          -webkit-appearance: none;
        }
        .play {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 8vw;
          height: 8vw;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        overflow: hidden;
        .name {
          margin-bottom: 1.333vw;
          height: 5.867vw;
          font-size: 4.267vw;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 5.867vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .duration {
          height: 5.333vw;
          font-size: 3.733vw;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ced3e0;
          line-height: 5.333vw;
        }
      }
    }
  }
  .top {
    width: 100vw;
    height: 20.267vw;
    padding-top: 11.467vw;
    font-size: 7.467vw;
    font-family: REEJI-BigYoung-BoldGB2.0-Regular, REEJI-BigYoung-BoldGB20;
    font-weight: 400;
    color: #ffffff;
    line-height: 10.133vw;
    text-align: center;
    margin-bottom: 1.333vw;
    img {
      width: 75%;
      vertical-align: middle;
    }
  }
  .date {
    // width: 49.867vw;
    height: 5.333vw;
    text-align: center;
    font-size: 3.733vw;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #fccf00;
    line-height: 5.333vw;
    margin: 0 auto;
  }
  .glass {
    width: 100%;
    height: 19.733vw;
    background-image: url("http://qnticao.laigl.com/vue/894785145b38fd57be6143765e755cc3.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .cloud-top,
  .cloud-left,
  .cloud-right {
    position: absolute;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
  .cloud-top {
    left: 47.2vw;
    top: 0;
    width: 13.6vw;
    height: 4.267vw;
  }
  .cloud-left {
    left: -6.4vw;
    top: 18.933vw;
    width: 19.733vw;
    height: 6.133vw;
  }
  .cloud-right {
    right: -2.4vw;
    top: 5.6vw;
    width: 19.733vw;
    height: 6.133vw;
  }
}
</style>